import React, { useRef, useState } from 'react'
import {
    UnorderedListOutlined, FontSizeOutlined, InstagramOutlined,
    CustomerServiceOutlined, PlaySquareOutlined, ProductOutlined, ShoppingOutlined
} from '@ant-design/icons';
import html2canvas from 'html2canvas'
// 引入发布接口,登录
import { get_publish } from '@/utils/index'
// 引入图片
import H5_LOGO from '../../../../../public/H5_logo.png'
import { useDispatch, useSelector } from 'react-redux';
import { alldel } from '@/store/modules/modules';
// 引入样式
import { Modal, Spin } from 'antd';
// 引入
import Prederive from './Prederive'
function dragDropHeader() {
    const downa = useRef<any>()
    const dispatch = useDispatch()
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isModalOpen1, setIsModalOpen1] = useState(false);
    // 获取仓库里画布拖得所有元素
    const componentList = useSelector((state: any) => state.reducer.componentList)
    const colors = useSelector((state: any) => state.reducer.color)
    // 加载中
    const [spinning, setSpinning] = React.useState<boolean>(false);

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const handleCancel1 = () => {
        setIsModalOpen1(false);
    };
    const iconAll = [
        {
            icon: <FontSizeOutlined />,
            text: '文本'
        },
        {
            icon: <InstagramOutlined />,
            text: '图片'
        },
        {
            icon: <CustomerServiceOutlined />,
            text: '音乐'
        },
        {
            icon: <PlaySquareOutlined />,
            text: '视频'
        }, {
            icon: <ProductOutlined />,
            text: '组件'
        }
        , {
            icon: <ShoppingOutlined />,
            text: '营销获客'
        }

    ]
    // 清空画布所有组件
    const alldelete = () => {
        dispatch(alldel())
    }
    // 生成图片
    const getImage = () => {
        let body: any = document.getElementById('box-canvas')
        html2canvas(body, { scale: 1, useCORS: true }).then(function (canvas: any) {
            console.log(canvas, 'canvas');
            var baseimage64 = canvas.toDataURL('image/png')
            console.log(baseimage64, 'baseimage64');
            // 模拟下载
            downa.current.href = baseimage64
            downa.current.click()
        })
    }
    // 导出
    const showexport = () => {
        setIsModalOpen1(true)
    }

    //发布
    const handlePublish = async () => {
        let userData = componentList
        if (userData.length > 0) {
            let userId = JSON.parse(localStorage.getItem('userId') as string)
            let body: any = document.getElementById('box-canvas')
            html2canvas(body, { scale: 1, useCORS: true }).then(async function (canvas: any) {
                var baseimage64 = canvas.toDataURL('image/png')
                const info: any = { userId, userData, baseimage64 }
                let res = await get_publish(info)
                if (res.data.code === 200) {
                    setSpinning(true);
                    setTimeout(() => {
                        setSpinning(false);
                        window.location.href = '/home/collection'
                    }, 3000);
                }
            })
        }
    }

    return (
        <div className='dragDrop_header'>
            <div className='dragDrop_header_left'><img src={H5_LOGO} alt="" /><p>开通会员</p> <p>风险提示</p> </div>
            <div className='dragDrop_header_center'>
                {
                    iconAll.map((item: any, index: any) => (
                        <dl key={index}>
                            <dt>{item.icon} </dt>
                            <dd> {item.text}</dd>
                        </dl>
                    ))
                }
            </div>
            <div className='dragDrop_header_right'>
                <p><UnorderedListOutlined />更多</p>
                <button onClick={() => setIsModalOpen(true)}>预览</button>
                <button onClick={getImage}>保存图片</button>
                <button>导入</button>
                <button onClick={showexport}>导出</button>
                <a href="" download='1.png' ref={downa}></a>
                <button onClick={alldelete}>清空画布</button>
                <Spin spinning={spinning} fullscreen />
                <button style={{ background: '#1261ff', color: '#fff' }} onClick={handlePublish}>发布</button>
                <button style={{ background: '#666666', color: '#fff' }}>退出</button>
                <Modal width={'40%'} open={isModalOpen} onCancel={handleCancel} footer={null}>
                    <div onClick={() => setIsModalOpen(false)} style={{ overflow: 'hidden', position: 'relative', height: "500px", margin: '20px', background: `rgba(${colors.r},${colors.g},${colors.b},${colors.a})` }}>
                        {
                            componentList.map((item: any, index: any) => <Prederive key={index} element={item.payload}></Prederive>)
                        }
                    </div>
                </Modal>
                <Modal title="导出" open={isModalOpen1} style={{ position: 'relative', height: "500px" }} onCancel={handleCancel1}>
                    {
                        componentList.map((item: any) => JSON.stringify(item))
                    }
                </Modal>

            </div>
        </div>
    )
}

export default dragDropHeader
